<template>
	<view class="currentStatus page">
		<status-bar title='详情'></status-bar>
		<view class="contents" @touchstart="winClick" v-if='detail'>
			<view class="contensList">
				<view class="textItems">
					<view class="itemsLists">
						<view class="leftHeadImg">
							<image v-if='detail.fqheadimg' :src="detail.fqheadimg" mode="aspectFill"></image>
							<image v-else :src="staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill"></image>
						</view>
						<view class="rightText">
							<view class="username">
								<view>{{detail.uname}}</view>
								<text class="thmeBg circleName" :style="{'--color': color}">{{detail.classname}}</text>
							</view>
							<view class="textCont" v-if='detail.file_content'>
								{{detail.file_content}}
							</view>
							<view class="ImgCont" v-if='detail.file_img' :class='{
									four:detail.file_img.length == 4,
									one:detail.file_img.length == 1
									}'>
								<image v-for='(img,i) in detail.file_img' :key='i' :src="img" mode="aspectFill" @click="imgFix(i)"></image>
							</view>
							<view class="looks flex-box flex-between">
								<view class="leftDate">
									<text class="iconfont icon-bar_icon_shijian"></text>
									<text>{{detail.addtime}}</text>
								</view>
								<view class="rightData flex-box">
									<view>
										<text class="iconfont icon-browse"></text>
										<text class="MORE" v-if='parseInt(detail.watch)>999'>999</text>
										<text v-else>{{detail.watch}}</text>
									</view>
									<view @click="like(detail.file_id,detail.ftvid)">
										<text v-if='detail.likeFlag' class="iconfont icon-guanzhu3"></text>
										<text v-else class="iconfont icon-guanzhu1"></text>
										<text class="MORE" v-if='parseInt(detail.zan)>999'>999</text>
										<text v-else>{{detail.zan}}</text>
									</view>
									<view>
										<text class="iconfont icon-pinglun"></text>
										<text class="MORE" v-if='parseInt(detail.pinlun)>999'>999</text>
										<text v-else>{{detail.pinlun}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="commentBox">
				<view class="triangle"  v-if='comList.length>0 || zanlist.length>0'></view>
				<view class="zanList" v-if='zanlist.length>0'>
					<text class="iconfont icon-guanzhu1 heart"></text>
					<view>
						<image v-for="(zan,z) in zanlist" class='fqHeadimg' :src="zan.fqheadimg?zan.fqheadimg:staticUrl+'/images/jh_up/head.jpg'"  :key='z'></image>
					</view>
				</view>
				<view v-if='comList.length>0'>
					<!-- <image src="/static/images/jh_up/tophead.png" alt="" class='fqHeadimg'></image> -->
					<view class="commentContent" v-for='(com,cc) in comList' :key='cc' @click="replayPeople(com.fq_name,com.fqvid)" >
						<view v-if='com.mubiao == "1"'>
							<text v-if='com.fq_name'>{{com.fq_name}}：</text>
							<text v-else>网友：</text>
							{{com.review_content}}
						</view>
						<view v-if='com.mubiao == "2"'>
							<text v-if='com.fq_name'>{{com.fq_name}}：</text>
							<text v-else>网友：</text>
							回复 
							<text v-if='com.bfq_name'>{{com.bfq_name}}：</text>
							<text v-else>网友：</text>
							{{com.review_content}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomInput">
			<input type="text" confirm-type='done' v-model="content" @blur='inputBlur' :placeholder="plac" />
			<text @click="comment">发送</text>
		</view>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>	
</template>

<script>
	var that;
	export default {
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				color: getApp().globalData.color,
				likes:false,
				ftvid:'', // 发帖人vid
				content:'',// 评论内容
				fileid:'',
				detail:{},// 详情
				bid: uni.getStorageSync('bid'),
				comList:[], // 评论列表
				zanlist:[], // 点赞列表
				mubiao: 1, //  回复的目标 1回复的是帖子 2回复的是人
				plac:'发表评论...',
				imgShow: false,
				winCl:true, // 判断是否点击除了input以外的元素
				saveFtVid:'', // 单独保存原发帖人的id 
				showModal:false,// 是否显示模态框
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onShow() {
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onLoad(options) {
			that = this
			var fileid = options.fileid;
			that.fileid = fileid;
			that.ftvid = options.ftvid;
			that.saveFtVid = options.ftvid;
			that.getplList(fileid);
			that.getDetail(fileid);
			that.getZanList(fileid);
		},
		methods: {
			winClick(){	
				setTimeout(function(){
					if(that.winCl){ // 点击的是屏幕
						that.plac = '发表评论...';
						that.ftvid = that.saveFtVid; // 重新设置被发帖人的id
						that.mubiao = 1; // 修改回复对象
					}	
					that.winCl = true
				},200)
				uni.hideKeyboard();
			},
			inputBlur(){
				this.plac = '发表评论...'
			},
			imgFix(index){
				// 预览图片
				uni.previewImage({
					current:index,
					loop: true,
					urls: that.detail.file_img,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			replayPeople(fq_name,ftvid){
				that.winCl = false;
				that.mubiao = 2;
				that.ftvid = ftvid;
				if(!fq_name)
					fq_name = '网友'
				that.plac = "回复 "+fq_name
			},
			getZanList(fileid){
				that.$http.post({
					url: '/zzj_singleSaleApi/zanlist',
					data: {
						bid: that.bid,
						file_id: fileid
					}
				}).then(res => {
					if(res.data){
						that.zanlist = res.data;
					}
				})
			},
			like(fileid,ftvid){
				uni.getStorage({
					key: 'vid',
					success: function(res) {
						// 点赞操作
						that.$http.post({
							url: '/SRA_UserApp/reply',
							data: {
								bid: that.bid,
								file_id: fileid,
								fqvid: res.data, // 评论人ID
								by_fqvid: ftvid, // 被评论或被点赞人ID
								review_type: 2, // 发起类型1回复，2赞,
								mubiao: 1 ,// 回复的目标 1回复的是帖子 2回复的是人
							}
						}).then(res => {
							if (res.success) {
								that.detail.likeFlag = true
								that.detail.zan +=1;
								that.zanlist.push(res.data)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								});
							}
						})
					},
					fail: function(res) {
						that.showModal = true;
					}
				})
			},
			getDetail(fileid){ 
				let vid = uni.getStorageSync("vid")
				that.$http.post({
					url: '/zzj_singleSaleApi/postDetails',
					data: {
						bid: that.bid,
						file_id: fileid,
						v_id: vid
					}
				}).then(res => {
					if(res.data){
						that.detail = res.data;
						that.detail.likeFlag = false;
						that.detail.zan = parseInt(that.detail.zan);
						if(that.detail.review_type == 2 && vid){ // 已赞
							that.detail.likeFlag = true;
						}
						if(that.detail.file_img){
							that.detail.file_img = that.detail.file_img.split(",");
							that.detail.file_img.forEach((item,index)=>{
								item = that.imgUrl+item;
								that.detail.file_img[index] = item
							})
						}
					}
				})
			},
			getplList(fileid){
				that.$http.post({
					url: '/zzjApp/pinlunlist',
					data: {
						bid: that.bid,
						fileid: fileid,
					}
				}).then(res => {
					if (res.data) {
						that.comList = res.data;
					}
				})
			},
			comment(){
				uni.getStorage({
					key: 'vid',
					success: function(res) {
						if(that.content == ''){
							return
						}
						that.winCl = false;
						uni.hideKeyboard();
						that.$http.post({
							url: '/zzjApp/reply',
							data: {
								bid: that.bid,
								file_id: that.fileid,
								fqvid: res.data, // 发起人的id
								by_fqvid: that.ftvid,
								review_type: 1, // 发起类型 1回复，2赞,
								review_content: that.content,
								mubiao: that.mubiao ,// 回复的目标 1回复的是帖子 2回复的是人
							}
						}).then(res => {
							if (res.errcode == '101') {
								uni.showToast({
									icon:'none',
									title:res.msg
								})
							}else{
								that.comList.push(res.data);
								that.detail.pinlun = parseInt(that.detail.pinlun)+1;
								that.content = '';
							}
						})
					},
					fail: function(res) {
						that.showModal = true;
					}
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	uni-page-body, uni-page-refresh{height: 100%;}
	.currentStatus{width: 100%;height: 100vh;background: white;overflow: auto;}
	.topNAVs{width: 100%;padding: 40upx 0;background: #FFFFFF;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;border-bottom: 20upx solid #F2F2F2;}
	.navsItem{width: 30%;text-align: center;}
	.navsItem image{width: 90upx;height: 90upx;margin-bottom: 20upx;position: relative;left: 50%;margin-left: -45upx;}
	.navsItemTitle{width: 100%;text-align: center;color: #333333;}
	
	.contents{overflow-x: hidden;overflow-y: auto;padding-bottom: 110upx;position: relative;height: 100vh;box-sizing: border-box;}
	.textItems,.username,.ImgCont,.looks{width: 100%;}
	.itemsLists{width: 100%;padding: 20upx;border-bottom: 1upx solid #F2F2F2;overflow: hidden;}
	.leftHeadImg{float: left;}
	.leftHeadImg image{width: 80upx;height: 80upx;border-radius: 100%;}
	.rightText{width: 610upx;float: left;margin-left: 20upx;}
	.username{
		font-weight: 700;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		  justify-content: flex-start;
		  align-items: center;
	}
	.username view{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.username .circleName {
		float: right;
		font-size: 20upx;
		color: white;
		font-weight: normal;
		padding: 2px 12upx;
		border-radius: 40upx;

	}
	.textCont{padding: 20upx 0;color: #333333;}
	.ImgCont {
		margin-top: 10upx;
		margin-right: -10upx;
	}
	
	.ImgCont image {
		display: inline-block;
		margin-right: 10upx;
		width: calc(33.33% - 10upx);
		height: calc(33.33vw - 54upx);
	}
	.four image:nth-child(2n){
		margin-right: 25upx;
	}
	.one image{
		width: 48%;
		height: calc(50vw - 40upx);
	}
	.ImgCont image:last-child {
		margin-right: 0;
	}
	.fqHeadimg{
		width: 56upx;
		height: 56upx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
	}
	.zanList{
		padding: 20upx 14upx 12upx 14upx;
		border-bottom: 1px solid white;
		display:flex;
	}
	.zanList view{
		
	}
	.zanList view image{
		width: 58upx;
		height: 58upx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
		margin-bottom: 14upx;
		
	}
	.zanList view image:nth-child(9n){
		margin-right: 0;
	}
	.zanList .heart{
		width: 34upx;
		height: 32upx;
		margin-top: 16upx;
		margin-right: 20upx;
	}
	
	.ImgCont image:last-child{margin-right: 0;}
	.looks{overflow: hidden;margin-top: 20upx;}
	
	
	.leftDate text{margin-right: 4rpx;color: #999999;}
	.rightData view{color: #666666;font-size: 24upx;margin-right: 20upx;display: flex;align-items: center;}
	.iconfont{
		font-size: 34rpx;
		color: #AFAFAF;
		padding-right: 4rpx;
		position: relative;
		top: 2rpx;
	}
	.icon-guanzhu3{
		color: $uni-color-star;
	}
	.bottomInput{width: 100%;padding: 20upx;position: fixed;bottom: 0;left: 0;right: 0;z-index: 9;background: #F5F5F5;height: 100upx;border-top: 1upx solid #F2F2F2;display: flex;}
	.bottomInput input{width: 80%;background: #FFFFFF;height: 100%;padding: 0 10upx;border-radius: 10upx;}
	.bottomInput text{color: #666666;line-height: 60upx;flex: 1;text-align: center;}
	
	.commentBox{
		background: #f2f2f261;
		/* padding: 20upx 20upx 20upx 14upx; */
		margin: 30upx;
		border-radius: 10upx;
		position: relative;
	}
	.triangle{border: 20upx solid transparent; border-bottom-color: #f2f2f261;position: absolute;top: -40upx;right: 64upx;}
	.commentContent{width: 100%;color: #666666;
		padding: 14upx 20upx 20upx 14upx;
	}
	.commentContent text{color: #333333;font-weight: 700;}
	.commentContent:last-child{margin-bottom: 0;}
	.imgShow1{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background: black;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
	}
	.imgShow1 image{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
	}
</style>